import React, { useState } from 'react';
import { ScrollView } from 'react-native';
import {
    View,
    Colors,
    Text,
    AnimatedScanner,
    Button,
} from 'react-native-ui-lib';
import { TestCase, TestSuite } from '@rnoh/testerino';

const ResetContainer = ({ children }) => {
    const [key, setKey] = useState(0);
    return (
        <View padding-10>
            <View right marginB-5>
                <Button
                    label="↻ 刷新动画"
                    size="xSmall"
                    link
                    color={Colors.blue30}
                    onPress={() => setKey(prev => prev + 1)}
                />
            </View>
            <View key={key}>
                {children}
            </View>
        </View>
    );
};

export default function AnimatedScannerScreen() {
    const [durationProgress, setDurationProgress] = useState(0);

    const [breakPointStatus, setBreakPointStatus] = useState('未开始');
    const [breakPointProgress, setBreakPointProgress] = useState(0);

    const resetDurationDemo = () => setDurationProgress(0);
    const startDurationDemo = () => setDurationProgress(100);

    const resetBreakDemo = () => {
        setBreakPointProgress(0);
        setBreakPointStatus('未开始');
    };
    const startBreakDemo = () => {
        setBreakPointStatus('扫描中...');
        setBreakPointProgress(100);
    };

    return (
        <TestSuite name="AnimatedScannerPropTest">
            <ScrollView>

                {/* 1. Progress 属性 */}
                <TestCase itShould="[progress] 属性对比: 左侧进度0，右侧进度50">
                    <ResetContainer>
                        <View row spread>
                            <View flex center>
                                <Text text80 marginB-10>Progress: 0</Text>
                                <View height={100} width={'90%'} bg-grey70>
                                    <AnimatedScanner
                                        progress={0}
                                        duration={1000}
                                        backgroundColor={Colors.purple30}
                                    />
                                </View>
                            </View>
                            <View flex center>
                                <Text text80 marginB-10>Progress: 50</Text>
                                <View height={100} width={'90%'} bg-grey70>
                                    <AnimatedScanner
                                        progress={50}
                                        duration={1000}
                                        backgroundColor={Colors.purple30}
                                    />
                                </View>
                            </View>
                        </View>
                    </ResetContainer>
                </TestCase>

                {/* 2. BackgroundColor 属性 */}
                <TestCase itShould="[backgroundColor] 左侧黄色，右侧红色">
                    <ResetContainer>
                        <View row spread>
                            <View flex center>
                                <Text text80 marginB-10>Default (Purple)</Text>
                                <View height={100} width={'90%'} bg-grey70>
                                    <AnimatedScanner
                                        backgroundColor={Colors.yellow30}
                                        progress={60}
                                        duration={1000}
                                    />
                                </View>
                            </View>
                            <View flex center>
                                <Text text80 marginB-10>Color: Red30</Text>
                                <View height={100} width={'90%'} bg-grey70>
                                    <AnimatedScanner
                                        backgroundColor={Colors.red30}
                                        progress={60}
                                        duration={1000}
                                    />
                                </View>
                            </View>
                        </View>
                    </ResetContainer>
                </TestCase>

                {/* 3. Opacity 属性 */}
                <TestCase itShould="[opacity] 属性对比: 左侧 0.5，右侧 0.9">
                    <ResetContainer>
                        <View row spread>
                            <View flex center>
                                <Text text80 marginB-10>Opacity: 0.5</Text>
                                <View height={100} width={'90%'} bg-grey70>
                                    <View absF center><Text>Content</Text></View>
                                    <AnimatedScanner
                                        opacity={0.5}
                                        progress={70}
                                        backgroundColor={Colors.blue30}
                                    />
                                </View>
                            </View>
                            <View flex center>
                                <Text text80 marginB-10>Opacity: 0.9</Text>
                                <View height={100} width={'90%'} bg-grey70>
                                    <View absF center><Text>Content</Text></View>
                                    <AnimatedScanner
                                        opacity={0.9}
                                        progress={70}
                                        backgroundColor={Colors.blue30}
                                    />
                                </View>
                            </View>
                        </View>
                    </ResetContainer>
                </TestCase>

                {/* 4. HideScannerLine 属性 */}
                <TestCase itShould="[hideScannerLine] 属性对比: 左侧显示线，右侧隐藏线">
                    <ResetContainer>
                        <View row spread>
                            <View flex center>
                                <Text text80 marginB-10>Show Line (Default)</Text>
                                <View height={100} width={'90%'} bg-grey70>
                                    <AnimatedScanner
                                        hideScannerLine={false}
                                        progress={50}
                                        opacity={0.8}
                                        backgroundColor={Colors.green30}
                                    />
                                </View>
                            </View>
                            <View flex center>
                                <Text text80 marginB-10>Hide Line</Text>
                                <View height={100} width={'90%'} bg-grey70>
                                    <AnimatedScanner
                                        hideScannerLine={true}
                                        progress={50}
                                        opacity={0.8}
                                        backgroundColor={Colors.green30}
                                    />
                                </View>
                            </View>
                        </View>
                    </ResetContainer>
                </TestCase>
                

                {/* 5. ContainerStyle 属性 */}
                <TestCase itShould="[containerStyle] 容器样式深度定制：1.细条轨道 2.圆角胶囊 3.虚线扫描框">
                    <ResetContainer>
                        <View style={{ height: 300 }}>
                            <View marginB-30> 
                                <Text text70 dark20 marginB-10> </Text>
                                <AnimatedScanner
                                    progress={70}
                                    duration={1500}
                                    backgroundColor={Colors.blue30}
                                    containerStyle={{
                                        height: 6,
                                        backgroundColor: Colors.grey60,
                                        borderRadius: 3
                                    }}
                                />
                            </View>

                            <View marginB-30>
                                <Text text70 dark20 marginB-10> </Text>
                                <AnimatedScanner
                                    progress={50}
                                    duration={1500}
                                    backgroundColor={Colors.purple30}
                                    hideScannerLine
                                    containerStyle={{
                                        height: 40,
                                        borderRadius: 20,
                                        backgroundColor: Colors.purple80,
                                        overflow: 'hidden',
                                        borderWidth: 1,
                                        borderColor: Colors.purple30
                                    }}
                                />
                            </View>

                            <View>
                                <Text text70 dark20 marginB-10> </Text>
                                <View center>
                                    <AnimatedScanner
                                        progress={60}
                                        duration={2000}
                                        opacity={0.3}
                                        backgroundColor={Colors.green30}
                                        containerStyle={{
                                            width: '100%',
                                            height: 120,
                                            backgroundColor: 'transparent',
                                            borderWidth: 2,
                                            borderColor: Colors.green30,
                                            borderStyle: 'dashed',
                                            borderRadius: 8
                                        }}
                                    />
                                    <Text text90 green30 style={{ position: 'absolute' }}> </Text>
                                </View>
                            </View>
                        </View>
                    </ResetContainer>
                </TestCase>

                {/* 6. Duration 属性 */}
                <TestCase itShould="[duration] 属性对比: 左侧快(500ms)，右侧慢(3000ms)">
                    <View padding-10>
                        <Button label="Click to Start Animation" size="xSmall" onPress={startDurationDemo} marginB-10 />
                        <Button label="Reset" size="xSmall" outline onPress={resetDurationDemo} marginB-10 />

                        <View row spread>
                            <View flex center>
                                <Text text80 marginB-5>Duration: 500ms</Text>
                                <View height={150} width={'90%'} bg-grey70>
                                    <AnimatedScanner
                                        progress={durationProgress}
                                        duration={500}
                                        backgroundColor={Colors.cyan30}
                                    />
                                </View>
                            </View>
                            <View flex center>
                                <Text text80 marginB-5>Duration: 3000ms</Text>
                                <View height={150} width={'90%'} bg-grey70>
                                    <AnimatedScanner
                                        progress={durationProgress}
                                        duration={3000}
                                        backgroundColor={Colors.cyan30}
                                    />
                                </View>
                            </View>
                        </View>
                    </View>
                </TestCase>

                {/* 7. onBreakpoint & testID 属性 */}
                <TestCase itShould="[onBreakpoint] & [testID]: 只有右侧绑定了回调事件">
                    <View padding-10>
                        <View row centerV spread marginB-10>
                            <Button label="Start Scan" size="xSmall" onPress={startBreakDemo} />
                            <Button label="Reset" size="xSmall" outline onPress={resetBreakDemo} marginL-10 />
                            <Text text70 marginL-20 flex color={breakPointStatus === '完成!' ? Colors.green30 : Colors.grey10}>
                                Status: {breakPointStatus}
                            </Text>
                        </View>

                        <View row spread>
                            <View flex center>
                                <Text text80 marginB-5>无回调</Text>
                                <View height={100} width={'90%'} bg-grey70>
                                    <AnimatedScanner
                                        progress={breakPointProgress}
                                        duration={2000}
                                        backgroundColor={Colors.violet30}
                                    />
                                </View>
                            </View>
                            <View flex center>
                                <Text text80 marginB-5>有回调 (onBreakpoint)</Text>
                                <View height={100} width={'90%'} bg-grey70>
                                    <AnimatedScanner
                                        testID="scanner-with-callback" // testID 属性展示
                                        progress={breakPointProgress}
                                        duration={2000}
                                        backgroundColor={Colors.violet30}
                                        onBreakpoint={({ isDone }) => {
                                            if (isDone) setBreakPointStatus('完成!');
                                        }}
                                    />
                                </View>
                            </View>
                        </View>
                    </View>
                </TestCase>

            </ScrollView>
        </TestSuite>
    );
}